<template>
  <div class="warpper">
    <img class="bgImg" src="@/assets/bg.png" alt="" />
    <div class="homeBox1_sec1">
      <div class="sec1_box1">
        <div class="voltage">10kV</div>
        <div class="sec1_box2">
          <div class="lineCulb">
            <div class="line_y1"></div>
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="line_y1"></div>
          </div>
          <div class="transformer">630kVA变压器</div>
        </div>
      </div>
      <div class="redCulb">
        <div class="redLine"></div>
      </div>
      <div class="flex">
        <div class="inverterArea">
          <div class="inverter">
            <div class="line_y2"></div>
            <div class="dis_aic txt_icon">
              <div class="inverterTxt inverterTxt2">光伏逆变器</div>
              <img class="icon1_1" src="@/assets/icon1_1.png" alt="" />
            </div>
            <div class="line_y2"></div>
            <div class="dis_aic txt_icon">
              <div class="inverterTxt">光伏板</div>
              <img class="icon1_2" src="@/assets/icon1_2.png" alt="" />
            </div>
            <div class="dis_aic" style="margin-right: 10%">
              <div class="txtNum_left">
                <div class="txtNum">实时功率 (kW) ：</div>
                <div class="txtNum">日发电量 (kWh) ：</div>
                <!-- <div class="txtNum">月发电量 (kWh) ：</div> -->
              </div>
              <div class="">
                <div class="txtNum" ref="pvRealPower">
                  {{
                    getValueByKey("21", "a:solar_panel_modbus_rtu:pv_out_power")
                  }}
                </div>
                <div class="txtNum" ref="pvDayPower">
                  {{
                    getValueByKey(
                      "21",
                      "a:solar_panel_modbus_rtu:total_gen_electric"
                    )
                  }}
                </div>
                <!-- <div class="txtNum" ref="pvMonthPower">100</div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="ac_pile">
          <div class="acArea">
            <div class="line_y3"></div>
            <div>
              <div class="line_x1"></div>
              <div class="dis_jsb line_y4_club">
                <div class="line_icon">
                  <div class="line_y4"></div>
                  <div class="dis_aic status_icon">
                    <div class="indicate">
                      <div class="dis_aic m8">
                        <div>正常</div>
                        <div class="pilot_lamp1" v-if="show1"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                      <div class="dis_aic m8">
                        <div>停止</div>
                        <div class="pilot_lamp1" v-if="show2"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                      <div class="dis_aic m8">
                        <div>异常</div>
                        <div class="pilot_lamp1" v-if="show3"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                    </div>
                    <img class="ac_icon1" src="@/assets/ac_icon1.png" />
                  </div>
                  <div class="pileNum">7kW交流桩</div>
                  <div class="dis_aic txtArea">
                    <div class="txtNumClub">
                      <div class="txtNum">充电电流 (A) ：</div>
                      <div class="txtNum">充电电压 (V) ：</div>
                      <div class="txtNum">充电功率 (kW) ：</div>
                      <div class="txtNum">日充电量 (kWh) ：</div>
                      <div class="txtNum">月充电量 (kWh) ：</div>
                    </div>
                    <div class="tac">
                      <div class="txtNum">1000</div>
                      <div class="txtNum">100</div>
                      <div class="txtNum">100</div>
                      <div class="txtNum">100</div>
                      <div class="txtNum">100</div>
                    </div>
                  </div>
                </div>
                <div class="line_icon">
                  <div class="line_y4"></div>
                  <div class="dis_aic status_icon">
                    <div class="indicate">
                      <div class="dis_aic m8">
                        <div>正常</div>
                        <div class="pilot_lamp1" v-if="show1"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                      <div class="dis_aic m8">
                        <div>停止</div>
                        <div class="pilot_lamp1" v-if="show2"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                      <div class="dis_aic m8">
                        <div>异常</div>
                        <div class="pilot_lamp1" v-if="show3"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                    </div>
                    <img class="ac_icon1" src="@/assets/ac_icon1.png" />
                  </div>
                  <div class="pileNum">7kW交流桩</div>
                  <div class="tac">
                    <div class="txtNum">1000</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                  </div>
                </div>
                <div class="line_icon">
                  <div class="line_y4"></div>
                  <div class="dis_aic status_icon">
                    <div class="indicate">
                      <div class="dis_aic m8">
                        <div>正常</div>
                        <div class="pilot_lamp1" v-if="show1"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                      <div class="dis_aic m8">
                        <div>停止</div>
                        <div class="pilot_lamp1" v-if="show2"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                      <div class="dis_aic m8">
                        <div>异常</div>
                        <div class="pilot_lamp1" v-if="show3"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                    </div>
                    <img class="ac_icon1" src="@/assets/ac_icon1.png" />
                  </div>
                  <div class="pileNum">7kW交流桩</div>
                  <div class="tac">
                    <div class="txtNum">1000</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                  </div>
                </div>
                <div class="line_icon">
                  <div class="line_y4"></div>
                  <div class="dis_aic status_icon">
                    <div class="indicate">
                      <div class="dis_aic m8">
                        <div>正常</div>
                        <div class="pilot_lamp1" v-if="show1"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                      <div class="dis_aic m8">
                        <div>停止</div>
                        <div class="pilot_lamp1" v-if="show2"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                      <div class="dis_aic m8">
                        <div>异常</div>
                        <div class="pilot_lamp1" v-if="show3"></div>
                        <div class="pilot_lamp2" v-else></div>
                      </div>
                    </div>
                    <img class="ac_icon1" src="@/assets/ac_icon1.png" />
                  </div>
                  <div class="pileNum">7kW交流桩</div>
                  <div class="tac">
                    <div class="txtNum">1000</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                    <div class="txtNum">100</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="table_box3">
        <div class="dis_jsb">
          <div class="leftTitle">光伏发电量：</div>
          <div class="dis_aic">
            <div class="dis_aic boxClub2">
              <div
                class="day"
                :class="active == 0 ? 'active' : ''"
                @click="select(0)"
              >
                每日
              </div>
              <div
                class="mounth"
                :class="active == 1 ? 'active' : ''"
                @click="select(1)"
              >
                每月
              </div>
            </div>
          </div>
        </div>
        <div class="chart" ref="homeSec3_chart4"></div>
      </div>
    </div>
    <div class="centerLine">
      <div class="cen_line2"></div>
      <div class="dis_jsb cenBox">
        <div class="cen_line1"></div>
        <div class="cen_line1"></div>
      </div>
    </div>
    <div class="homeBox1_sec1 homeBox1_sec2">
      <div class="sec1_box1">
        <div class="voltage">10kV</div>
        <div class="sec1_box2">
          <div class="lineCulb">
            <div class="line_y1"></div>
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="line_y1"></div>
          </div>
          <div class="transformer">630kVA变压器</div>
        </div>
      </div>
      <div class="redArea">
        <div class="redTxt">0.4kV母线</div>
        <div class="redLine2"></div>
        <div class="line_y5"></div>
      </div>
      <div>
        <div class="line_x2"></div>
        <div class="dis_jsb2 line_y4_club line_y4_club2">
          <div class="leftBox">
            <div class="line_icon">
              <div class="line_y7"></div>
              <div class="dis_aic status_icon">
                <div class="indicate2">
                  <div class="dis_aic m8">
                    <div>正常</div>
                    <div class="pilot_lamp1" v-if="show1"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>停止</div>
                    <div class="pilot_lamp1" v-if="show2"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>异常</div>
                    <div class="pilot_lamp1" v-if="show3"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                </div>
                <img class="energyBox" src="@/assets/energyBox.png" />
              </div>
              <div class="pileNum">储能</div>
              <div class="dis_aic txtArea">
                <div class="txtNumClub txtNumClub2">
                  <div class="txtNum">剩余SOC (%) ：</div>
                  <div class="txtNum">电池SOH (%) ：</div>
                  <div class="txtNum">日充电量 (kWh) ：</div>
                  <div class="txtNum">日放电量 (kWh) ：</div>
                  <div class="txtNum">最高温度 (℃) ：</div>
                  <div class="txtNum">最低温度 (℃) ：</div>
                </div>
                <div class="tac">
                  <div class="txtNum" ref="storageSOC">63</div>
                  <div class="txtNum" ref="storageSOH">100</div>
                  <div class="txtNum" ref="storageDayCharge">100</div>
                  <div class="txtNum" ref="storageDayDischarge">100</div>
                  <div class="txtNum" ref="storageMaxTemp">75</div>
                  <div class="txtNum" ref="storageMinTemp">10</div>
                </div>
              </div>
            </div>
            <div class="line_icon" style="margin-left: 12%">
              <div class="line_y6"></div>
              <div class="dis_aic status_icon">
                <div class="indicate">
                  <div class="dis_aic m8">
                    <div>正常</div>
                    <div class="pilot_lamp1" v-if="show1"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>停止</div>
                    <div class="pilot_lamp1" v-if="show2"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>异常</div>
                    <div class="pilot_lamp1" v-if="show3"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                </div>
                <img class="ac_icon2" src="@/assets/ac_icon2.png" />
              </div>
              <div class="pileNum pileNum2">V2G快充桩 (120kW)</div>
              <div class="dis_aic txtArea">
                <div class="txtNumClub">
                  <div class="txtNum">充电电流 (A) ：</div>
                  <div class="txtNum">充电电压 (V) ：</div>
                  <div class="txtNum">充电功率 (kW) ：</div>
                  <div class="txtNum">日充电量 (kWh) ：</div>
                  <div class="txtNum">月充电量 (kWh) ：</div>
                </div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
            </div>
          </div>
          <div class="rightBox">
            <div class="line_icon">
              <div class="line_y6"></div>
              <div class="dis_aic status_icon">
                <div class="indicate">
                  <div class="dis_aic m8">
                    <div>正常</div>
                    <div class="pilot_lamp1" v-if="show1"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>停止</div>
                    <div class="pilot_lamp1" v-if="show2"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>异常</div>
                    <div class="pilot_lamp1" v-if="show3"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                </div>
                <img class="ac_icon1" src="@/assets/ac_icon1.png" />
              </div>
              <div class="pileNum">7kW交流桩</div>
              <div class="dis_aic txtArea">
                <div class="txtNumClub">
                  <div class="txtNum">充电电流 (A) ：</div>
                  <div class="txtNum">充电电压 (V) ：</div>
                  <div class="txtNum">充电功率 (kW) ：</div>
                  <div class="txtNum">日充电量 (kWh) ：</div>
                  <div class="txtNum">月充电量 (kWh) ：</div>
                </div>
                <div class="tac">
                  <div class="txtNum">1000</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                  <div class="txtNum">100</div>
                </div>
              </div>
            </div>
            <div class="line_icon">
              <div class="line_y6"></div>
              <div class="dis_aic status_icon">
                <div class="indicate">
                  <div class="dis_aic m8">
                    <div>正常</div>
                    <div class="pilot_lamp1" v-if="show1"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>停止</div>
                    <div class="pilot_lamp1" v-if="show2"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>异常</div>
                    <div class="pilot_lamp1" v-if="show3"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                </div>
                <img class="ac_icon1" src="@/assets/ac_icon1.png" />
              </div>
              <div class="pileNum">7kW交流桩</div>
              <div class="tac">
                <div class="txtNum">1000</div>
                <div class="txtNum">100</div>
                <div class="txtNum">100</div>
                <div class="txtNum">100</div>
                <div class="txtNum">100</div>
              </div>
            </div>
            <div class="line_icon">
              <div class="line_y6"></div>
              <div class="dis_aic status_icon">
                <div class="indicate">
                  <div class="dis_aic m8">
                    <div>正常</div>
                    <div class="pilot_lamp1" v-if="show1"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>停止</div>
                    <div class="pilot_lamp1" v-if="show2"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>异常</div>
                    <div class="pilot_lamp1" v-if="show3"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                </div>
                <img class="ac_icon1" src="@/assets/ac_icon1.png" />
              </div>
              <div class="pileNum">7kW交流桩</div>
              <div class="tac">
                <div class="txtNum">1000</div>
                <div class="txtNum">100</div>
                <div class="txtNum">100</div>
                <div class="txtNum">100</div>
                <div class="txtNum">100</div>
              </div>
            </div>
            <div class="line_icon">
              <div class="line_y6"></div>
              <div class="dis_aic status_icon">
                <div class="indicate">
                  <div class="dis_aic m8">
                    <div>正常</div>
                    <div class="pilot_lamp1" v-if="show1"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>停止</div>
                    <div class="pilot_lamp1" v-if="show2"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                  <div class="dis_aic m8">
                    <div>异常</div>
                    <div class="pilot_lamp1" v-if="show3"></div>
                    <div class="pilot_lamp2" v-else></div>
                  </div>
                </div>
                <img class="ac_icon1" src="@/assets/ac_icon1.png" />
              </div>
              <div class="pileNum">7kW交流桩</div>
              <div class="tac">
                <div class="txtNum">1000</div>
                <div class="txtNum">100</div>
                <div class="txtNum">100</div>
                <div class="txtNum">100</div>
                <div class="txtNum">100</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 图 -->
      <!-- style="border: 1px solid red" -->
      <div>
        <div class="flex">
          <div class="table_box">
            <div class="chart" id="homeSec3_chart1"></div>
          </div>
          <div>
            <div class="table_box1">
              <div class="dis_jsb">
                <div class="leftTitle">储能充放电量：</div>
                <div class="dis_aic">
                  <div class="dis_aic boxClub2">
                    <div
                      class="day"
                      :class="active1 == 0 ? 'active' : ''"
                      @click="select1(0)"
                    >
                      每日
                    </div>
                    <div
                      class="mounth"
                      :class="active1 == 1 ? 'active' : ''"
                      @click="select1(1)"
                    >
                      每月
                    </div>
                  </div>
                </div>
              </div>
              <div class="chart" ref="homeSec3_chart2"></div>
            </div>
            <div class="table_box1 table_box2">
              <div class="dis_jsb">
                <div class="leftTitle">快充桩充放电功率：</div>
                <div class="dis_aic">
                  <div class="dis_aic boxClub2">
                    <div
                      class="day"
                      :class="active2 == 0 ? 'active' : ''"
                      @click="select2(0)"
                    >
                      每时
                    </div>
                    <div
                      class="mounth"
                      :class="active2 == 1 ? 'active' : ''"
                      @click="select2(1)"
                    >
                      每日
                    </div>
                  </div>
                </div>
              </div>
              <div class="chart" ref="homeSec3_chart3"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VChart from "@visactor/vchart";
import {
  deviceList,
  electricStorge,
  quickCharge,
  realtimeOptions,
  solarPanel,
} from "/src/api/index"; // 引入数据接口
export default {
  name: "HelloWorld",
  data() {
    return {
      ws: null,

      info: {},
      show1: true,
      show2: false,
      show3: true,
      active: 0,
      active1: 0,
      active2: 0,

      chartInstance: null,
      chartInstance2: null,
      chartInstance3: null,

      yearData: [
        { year: "每日", data: [[], []] }, // 每日数据（长度=当月天数）
        {
          year: "每月",
          data: [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          ],
        }, // 12个月
      ],
      dailyRefreshTimer: null,

      hourConfig: {
        xOrder: [0, 10, 20, 30, 40, 50], // 固定分钟顺序
        xLabels: ["0分钟", "10分钟", "20分钟", "30分钟", "40分钟", "50分钟"], // 分钟标签
      },
      // 每日数据配置（日期：默认显示当月1-31号，可根据实际月份调整）
      dayConfig: {
        xOrder: Array.from({ length: 31 }, (_, i) => i + 1), // 1-31号
        xLabels: Array.from({ length: 31 }, (_, i) => `${i + 1}日`), // 日期标签
      },
      chargeDischargeData: [[], []], // 存储处理后的充电/放电数据

      hourTimer: null, // 存储「每时」请求定时器（10分钟一次）
      dayTimer: null, // 存储「每日」请求定时器（1天一次）
      fullTimeConfig: this.generateFullTimeConfig(),

      powerData: [],
      powerData1: [],
    };
  },
  computed: {},

  created() {},

  mounted() {
    // 确保DOM完全渲染后初始化图表
    this.$nextTick(() => {
      // this.getData();
      this.getCuneng();
      this.getDCkc();
      this.getSunlight();
      this.getDCmc();
      this.initCharts();
      this.initDayConfig();
      this.getData1().then(() => {
        this.drawChart1(this.active1); // 首次渲染图表
      });
      this.startDailyAutoRefresh(); // 启动每日自动刷新（仅getData1）
      this.startChartRefresh(); // 启动图表轮询
      this.getData3();
      // 监听窗口大小变化，实时调整图表尺寸
      window.addEventListener("resize", this.handleResize);
    });
  },

  methods: {
    async getData() {
      try {
        const res = await deviceList();
        // console.log(res, "===大屏设备信息列表==");
      } catch (err) {
        console.error("数据获取失败:", err);
        this.initEmptyData(); // 失败时填充全0
      }
    },

    // 物模型属性等项配置
    async getCuneng() {
      try {
        const res = await realtimeOptions({
          key: "a:Inxall", // 电力储能柜
        });
        console.log(res, "==电力储能柜===");
      } catch (err) {
        console.error("数据获取失败:", err);
      }
    },
    async getDCkc() {
      try {
        const res = await realtimeOptions({
          key: "a:eletric_websocket", // Websocket直流快充电桩
        });
        console.log(res, "==Websocket直流快充电桩===");
      } catch (err) {
        console.error("数据获取失败:", err);
      }
    },
    async getSunlight() {
      try {
        const res = await realtimeOptions({
          key: "a:solar_panel_modbus_rtu", // Rtu光伏电表
        });
        console.log(res, "==Modbus Rtu光伏电表===");
        // 提取所有 value 到新数组
        const valueArray = res.map((item) => item.value);
        // this.initWebSocket(valueArray);
      } catch (err) {
        console.error("数据获取失败:", err);
      }
    },
    async getDCmc() {
      try {
        const res = await realtimeOptions({
          key: "a:slow_chg_modbus_rtu", // Rtu慢充电桩
        });
        console.log(res, "==Rtu慢充电桩===");
      } catch (err) {
        console.error("数据获取失败:", err);
      }
    },

    initWebSocket(valueArray) {
      // 先判断：如果已有连接且连接状态是“打开”，先关闭旧连接（避免重复）
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.close();
      }

      const wsUrl = "ws://10.168.1.146:8087/ws/iot/view";
      this.ws = new WebSocket(wsUrl);

      // 连接成功
      this.ws.onopen = () => {
        console.log("WebSocket 连接成功");
        // this.ws.send(JSON.stringify(valueArray));
        this.onopenWebSocket(valueArray);
      };

      // 接收服务器推送的数据
      this.ws.onmessage = (event) => {
        console.error("接收服务器推送的数据:", event);
        try {
          const dataArray = JSON.parse(event.data);
          console.log("解析后的数组对象：", dataArray);
          this.powerData = Array.isArray(dataArray) ? dataArray : [];
          console.log(this.powerData, "---1111---");

          // this.handleWebSocketData(data); // 处理推送数据
        } catch (err) {
          console.error("WebSocket 数据解析失败:", err);
        }
      };

      // 连接关闭（自动重连）
      this.ws.onclose = (event) => {
        console.log("WebSocket 连接关闭，正在重连...", event);
        // 3秒后自动重连
        setTimeout(() => this.initWebSocket(), 3000);
      };

      // 连接错误
      this.ws.onerror = (err) => {
        console.error("WebSocket 错误:", err);
        this.ws.close();
      };
    },

    onopenWebSocket(valueArray) {
      this.ws.send(JSON.stringify(valueArray));
    },

    getValueByKey(deviceSn, targetKey) {
      // 从powerData中查找匹配的对象
      const item = this.powerData.find(
        (item) => item.deviceSn === deviceSn && item.key === targetKey
      );
      // 存在则返回value，否则返回0（或空）
      return item ? item.value : 0;
    },

    // 初始化图表实例
    initCharts() {
      // 销毁可能存在的旧实例
      this.destroyCharts();
      // 创建新实例（确保DOM节点存在）
      if (this.$refs.homeSec3_chart2) {
        this.chartInstance = this.$echarts.init(this.$refs.homeSec3_chart2);
      }
      if (this.$refs.homeSec3_chart3) {
        this.chartInstance2 = this.$echarts.init(this.$refs.homeSec3_chart3);
      }
      if (this.$refs.homeSec3_chart4) {
        this.chartInstance3 = this.$echarts.init(this.$refs.homeSec3_chart4);
      }
    },

    getTimeToNextDay() {
      const now = new Date();
      const nextDay = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate() + 1
      );
      // 次日0点 - 当前时间 = 剩余毫秒数
      return nextDay.getTime() - now.getTime();
    },

    /**
     * 启动每日自动刷新（每天0点触发一次getData1）
     */
    startDailyAutoRefresh() {
      // 1. 计算首次刷新的延迟时间（距离次日0点的毫秒数）
      const firstDelay = this.getTimeToNextDay();

      // 2. 首次延迟执行（次日0点触发）
      setTimeout(() => {
        // 执行数据刷新
        this.getData1().then(() => {
          this.drawChart1(this.active1); // 刷新后重新渲染图表
          console.log("每日自动刷新：储能充放电数据已更新");
        });

        // 3. 之后每天循环执行（24小时=86400000毫秒）
        this.dailyRefreshTimer = setInterval(() => {
          this.getData1().then(() => {
            this.drawChart1(this.active1);
            console.log("每日自动刷新：储能充放电数据已更新");
          });
        }, 86400000); // 24小时的毫秒数
      }, firstDelay);
    },

    /**
     * 清除每日自动刷新定时器（组件销毁时调用）
     */
    clearDailyRefreshTimer() {
      if (this.dailyRefreshTimer) {
        clearInterval(this.dailyRefreshTimer);
        this.dailyRefreshTimer = null;
      }
    },

    // 启动图表定时刷新
    startChartRefresh() {
      const timeType = this.active2 === 0 ? "hour" : "day";
      this.startData2Timer(timeType);
    },

    // 异步获取数据
    async getData1() {
      try {
        const res = await electricStorge({
          timeType: this.active1 == 0 ? "day" : "month",
        });
        if (this.active1 === 0) {
          this.formatDayData(res); // 字段→当日（14=14号）
        } else {
          this.formatMonthData(res); // 字段→当月（1=1月）
        }
      } catch (err) {
        console.error("数据获取失败:", err);
        this.initEmptyData(); // 失败时填充全0
      }
    },

    async getData2() {
      try {
        const res = await quickCharge({
          timeType: this.active2 == 0 ? "hour" : "day",
        });
        // 解构接口数据（默认空对象，避免报错）
        const { chargeQt = {}, dischargeQt = {} } = res;

        let chargeData = [];
        let dischargeData = [];

        // 区分模式：0=每时（完整时间轴），1=每日（日期）
        if (this.active2 === 0) {
          // 每时模式：按完整时间轴填充数据
          chargeData = this.fullTimeConfig.map((item) => {
            return Number(chargeQt[item.timeKey]) || 0;
          });
          dischargeData = this.fullTimeConfig.map((item) => {
            return Number(dischargeQt[item.timeKey]) || 0;
          });
        } else {
          // 每日模式：保持原有日期逻辑（1-31日）
          const { xOrder } = this.dayConfig;
          chargeData = xOrder.map((key) => Number(chargeQt[key]) || 0);
          dischargeData = xOrder.map((key) => Number(dischargeQt[key]) || 0);
        }
        this.chargeDischargeData = [chargeData, dischargeData];
      } catch (err) {
        console.error("数据获取失败:", err);
        // 失败时按当前配置填充全0数据
        if (this.active2 === 0) {
          chargeData = this.fullTimeConfig.map(() => 0);
          dischargeData = this.fullTimeConfig.map(() => 0);
        } else {
          const { xOrder } = this.dayConfig;
          chargeData = xOrder.map(() => 0);
          dischargeData = xOrder.map(() => 0);
        }
        this.chargeDischargeData = [chargeData, dischargeData];
      }
    },

    async getData3() {
      try {
        const res = await solarPanel({
          timeType: this.active == 0 ? "day" : "month",
        });
        // console.log(res, "==getData3===");
        // 定义存储处理后的数据（按时间顺序的数组）
        let formattedData = [];
        // 定义X轴标签（按时间顺序）
        let xLabels = [];
        if (this.active === 0) {
          // 每日模式：处理日期数据（键为日期，如"1"→1日）
          const dayData = res || {};
          // 获取当前月份的总天数（确保覆盖所有可能的日期）
          const totalDays = this.getDaysInCurrentMonth();
          // 按1-31日顺序填充数据（无数据的日期补0）
          formattedData = Array.from({ length: totalDays }, (_, i) => {
            const day = i + 1; // 日期（1-31）
            return Number(dayData[day]) || 0; // 转换为数字，无数据则为0
          });
          // X轴标签：1日-31日
          xLabels = Array.from({ length: totalDays }, (_, i) => `${i + 1}日`);
        } else {
          // 每月模式：处理月份数据（键为月份，如"4"→4月）
          const monthData = res || {};
          // 按1-12月顺序填充数据（无数据的月份补0）
          formattedData = Array.from({ length: 12 }, (_, i) => {
            const month = i + 1; // 月份（1-12）
            return Number(monthData[month]) || 0; // 转换为数字，无数据则为0
          });
          // X轴标签：1月-12月
          xLabels = [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ];
        }

        // 调用图表绘制方法，传入处理后的数据和标签
        this.drawChart3(formattedData, xLabels);
      } catch (err) {
        console.error("数据获取失败:", err);
        this.drawChart3([], []);
      }
    },

    // 初始化空数据（失败备用）
    initEmptyData() {
      const currentMonthDays = this.getDaysInCurrentMonth();
      // 每日：当月天数全0
      this.yearData[0] = {
        year: "每日",
        data: [
          Array(currentMonthDays).fill(0),
          Array(currentMonthDays).fill(0),
        ],
      };
      // 每月：12个月全0
      this.yearData[1] = {
        year: "每月",
        data: [Array(12).fill(0), Array(12).fill(0)],
      };
    },

    // 获取当前月份的天数（自动适配平年闰年、大小月）
    getDaysInCurrentMonth() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1; // 月份从0开始，需+1
      return new Date(year, month, 0).getDate(); // 下个月1号的前一天=当月最后一天
    },

    // 初始化每日配置（在mounted中调用）
    initDayConfig() {
      const days = this.getDaysInCurrentMonth();
      this.dayConfig.xOrder = Array.from({ length: days }, (_, i) => i + 1);
      this.dayConfig.xLabels = Array.from(
        { length: days },
        (_, i) => `${i + 1}日`
      );
    },

    // 格式化每日数据：动态提取接口所有字段，字段名=日期（如14=14号）
    formatDayData(apiData) {
      const chargeTag = apiData.TAG_4F34 || {}; // 每日充电数据
      const dischargeTag = apiData.TAG_4F36 || {}; // 每日放电数据
      const currentMonthDays = this.getDaysInCurrentMonth();

      // 初始化当月所有日期为0（数组索引=日期-1）
      const dayChargeValues = Array(currentMonthDays).fill(0);
      const dayDischargeValues = Array(currentMonthDays).fill(0);

      // 动态提取充电数据的所有字段（字段名=日期）
      Object.entries(chargeTag).forEach(([field, value]) => {
        const day = Number(field); // 字段名转为数字（如"14"→14）
        const index = day - 1; // 转换为数组索引（14号→13）
        // 验证：字段是有效数字 + 日期在当月范围内（1-当月天数）
        if (!isNaN(day) && index >= 0 && index < currentMonthDays) {
          dayChargeValues[index] = value ?? 0;
        }
      });

      // 动态提取放电数据的所有字段（字段名=日期）
      Object.entries(dischargeTag).forEach(([field, value]) => {
        const day = Number(field);
        const index = day - 1;
        if (!isNaN(day) && index >= 0 && index < currentMonthDays) {
          dayDischargeValues[index] = value ?? 0;
        }
      });

      // 更新每日数据
      this.yearData[0] = {
        year: "每日",
        data: [dayChargeValues, dayDischargeValues],
      };
    },

    // 格式化每月数据：动态提取接口所有字段，字段名=月份（如1=1月）
    formatMonthData(apiData) {
      const chargeTag = apiData.TAG_4F34 || {}; // 每月充电数据
      const dischargeTag = apiData.TAG_4F36 || {}; // 每月放电数据

      // 初始化12个月全0（数组索引=月份-1）
      const monthChargeValues = Array(12).fill(0);
      const monthDischargeValues = Array(12).fill(0);

      // 动态提取充电数据的所有字段（字段名=月份）
      Object.entries(chargeTag).forEach(([field, value]) => {
        const month = Number(field); // 字段名转为数字（如"1"→1）
        const index = month - 1; // 转换为数组索引（1月→0）
        // 验证：字段是有效数字 + 月份在1-12范围内
        if (!isNaN(month) && index >= 0 && index < 12) {
          monthChargeValues[index] = value ?? 0;
        }
      });

      // 动态提取放电数据的所有字段（字段名=月份）
      Object.entries(dischargeTag).forEach(([field, value]) => {
        const month = Number(field);
        const index = month - 1;
        if (!isNaN(month) && index >= 0 && index < 12) {
          monthDischargeValues[index] = value ?? 0;
        }
      });

      // 更新每月数据
      this.yearData[1] = {
        year: "每月",
        data: [monthChargeValues, monthDischargeValues],
      };
    },

    // 生成 00:00-23:50 完整时间轴配置
    generateFullTimeConfig() {
      const config = [];
      // 遍历 0-23 小时
      for (let hour = 0; hour < 24; hour++) {
        // 遍历每小时的 0/10/20/30/40/50 分钟
        for (let minute = 0; minute < 60; minute += 10) {
          const timeKey = `${hour.toString().padStart(2, "0")}:${minute
            .toString()
            .padStart(2, "0")}`; // 时间标识：如 "11:00"
          const showLabel = minute === 0; // 仅整点（分钟=0）显示 X 轴标签
          const label = `${hour.toString().padStart(2, "0")}:00`; // X 轴显示标签：如 "11:00"
          config.push({ timeKey, showLabel, label });
        }
      }
      return config;
    },

    startData2Timer(timeType) {
      // 先销毁所有旧定时器（避免多个定时器同时运行）
      this.clearData2Timer();

      // 定义频率：hour=10分钟（600000ms），day=1天（86400000ms）
      const interval = timeType === "hour" ? 600000 : 86400000;
      // 定义定时器回调（请求数据+刷新图表）
      const timerCallback = async () => {
        await this.getData2();
        this.drawChart2();
      };

      // 立即执行一次（避免等待第一个周期才请求）
      timerCallback();

      // 创建并存储定时器
      if (timeType === "hour") {
        this.hourTimer = setInterval(timerCallback, interval);
      } else {
        this.dayTimer = setInterval(timerCallback, interval);
      }
    },

    clearData2Timer() {
      if (this.hourTimer) {
        clearInterval(this.hourTimer);
        this.hourTimer = null;
      }
      if (this.dayTimer) {
        clearInterval(this.dayTimer);
        this.dayTimer = null;
      }
    },

    // 处理窗口大小变化
    handleResize() {
      if (this.chartInstance) this.chartInstance.resize();
      if (this.chartInstance2) this.chartInstance2.resize();
      if (this.chartInstance3) this.chartInstance3.resize();
    },

    select(index) {
      this.active = index;
      this.getData3();
    },

    // 切换每日/每月时重新获取数据并渲染
    select1(index) {
      this.active1 = index;
      this.getData1().then(() => {
        this.drawChart1(index); // 传入索引强制刷新图表
      });
    },

    // 储能充放电量：动态适配x轴标签（每日=日期，每月=月份）
    drawChart1(index) {
      // 动态生成x轴标签
      const yearData = this.yearData;
      const targetIndex = index !== undefined ? index : this.active1;
      const targetData = yearData[targetIndex];

      let xAxisData = [];
      if (targetData.year === "每日") {
        const days = targetData.data[0].length;
        xAxisData = Array.from({ length: days }, (_, i) => `${i + 1}日`);
      } else {
        xAxisData = [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ]; // 完整月份数组
      }

      const option = {
        color: ["#F0DE1F", "#25BEFD"],
        tooltip: { trigger: "axis" },
        legend: { textStyle: { color: "#4c9bfd" }, right: "10%" },
        grid: {
          top: "5%",
          left: "2%",
          right: "2%",
          bottom: "5%",
          show: false,
          borderColor: "#012f4a",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xAxisData, // 动态x轴标签
          axisTick: { show: false },
          axisLabel: {
            color: "#ffffff",
            interval: 0,
            rotate: 45,
            fontSize: 12,
          },
          axisLine: { show: false },
        },
        yAxis: {
          type: "value",
          axisTick: { show: false },
          axisLabel: { color: "#ffffff", formatter: "{value} kWh" },
          axisLine: { show: false },
          splitLine: { lineStyle: { color: "#012f4a" } },
        },
        series: [
          {
            name: "充电",
            type: "line",
            smooth: false,
            data: targetData.data[0],
          },
          {
            name: "放电",
            type: "line",
            smooth: false,
            data: targetData.data[1],
          },
        ],
      };

      this.chartInstance.setOption(option);
    },

    select2(index) {
      this.active2 = index;
      // this.getData2().then(() => {
      //   this.drawChart2(); // 传入索引强制刷新图表
      // });
      const timeType = index === 0 ? "hour" : "day";
      this.startData2Timer(timeType);
    },

    // 碳指标数据
    drawChart() {
      let data = 48;
      const spec = {
        type: "circularProgress",
        data: [
          {
            values: [
              {
                type: "碳指标数据",
                value: (Number(data) / 100).toFixed(2),
              },
            ],
          },
        ],
        title: {
          orient: "top",
          visible: true,
          text: "碳指标",
          textStyle: {
            fontSize: 20,
            fill: "#26B9D5",
            fontWeight: "normal",
          },
        },
        padding: [10, 20, 20, 20],
        valueField: "value",
        categoryField: "type",
        background: "transparent",
        outerRadius: 1,
        innerRadius: 0.85,
        progress: {
          style: {
            innerPadding: 0,
            outerPadding: 0,
            cornerRadius: 10,
            fill: "#26B9D5",
          },
        },
        indicator: {
          visible: true,
          title: {
            style: {
              fontSize: (document.documentElement.clientWidth / 1920) * 24,
              fill: "#26B9D5",
              text: data + "%",
            },
          },
        },
        tooltip: {
          mark: {
            content: [
              {
                key: (datum) => datum["type"],
                value: (datum) => datum["value"] * 100 + "%",
              },
            ],
          },
        },
        animationAppear: {
          duration: 1500, // 动画持续时间，单位为毫秒(ms)
        },
      };

      // 绘制
      const vchart = new VChart(spec, { dom: "homeSec3_chart1" });
      vchart.renderAsync();

      // setTimeout(() => {
      //   vchart.release();
      // }, 5000);
    },

    drawChart2() {
      const {
        chargeDischargeData = [[0], [0]],
        active2,
        fullTimeConfig,
        dayConfig,
      } = this;

      let xLabels = [];
      let xTimeKeys = []; // 用于tooltip显示完整时间/日期
      let gridBottom = "8%"; // 图表底部边距

      if (this.active2 === 0) {
        // 每时模式：X轴仅显示整点标签，tooltip显示完整时间
        xLabels = fullTimeConfig.map((item) =>
          item.showLabel ? item.label : ""
        );
        xTimeKeys = fullTimeConfig.map((item) => item.timeKey);
        gridBottom = "8%"; // 每时模式标签密集，保留足够边距
      } else {
        // 每日模式：保持原有日期显示逻辑
        xLabels = dayConfig.xLabels;
        xTimeKeys = dayConfig.xOrder.map((day) => `${day}日`);
        gridBottom = "3%"; // 每日模式标签较少，减少边距
      }

      const option = {
        color: ["#F0DE1F", "#25BEFD"],
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            // 动态调整tooltip显示（分钟/日期）
            const time = xTimeKeys[params[0].dataIndex];
            const unit = this.active2 == 0 ? "kW" : "kW"; // 每时=功率(kW)，每日=电量(kWh)
            return (
              `${time}<br/>` +
              `${params[0].seriesName}：${params[0].value} ${unit}<br/>` +
              `${params[1].seriesName}：${params[1].value} ${unit}`
            );
          },
        },
        legend: {
          textStyle: { color: "#4c9bfd" },
          right: "10%",
          data: ["充电", "放电"],
        },
        grid: {
          top: "8%",
          left: "2%",
          right: "2%",
          bottom: gridBottom,
          show: false,
          borderColor: "#012f4a",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xLabels, // 动态X轴标签（分钟/日期）
          axisTick: { show: false },
          axisLabel: {
            color: "#ffffff",
            rotate: active2 === 1 ? 45 : 0, // 日期标签旋转45度，避免重叠
          },
          axisLine: { show: false },
        },
        yAxis: {
          type: "value",
          axisTick: { show: false },
          axisLabel: {
            color: "#ffffff",
            formatter: "{value} kW", // 保持数值原格式
          },
          axisLine: { show: false },
          splitLine: { lineStyle: { color: "#012f4a" } },
        },
        series: [
          {
            name: "充电",
            type: "line",
            smooth: false,
            data: chargeDischargeData[0],
            symbol: "circle", // 显示数据点
            symbolSize: 6, // 数据点大小
          },
          {
            name: "放电",
            type: "line",
            smooth: false,
            data: chargeDischargeData[1],
            symbol: "circle",
            symbolSize: 6,
          },
        ],
      };

      this.chartInstance2.setOption(option);
    },

    drawChart3(data, xLabels) {
      // 确保图表实例存在（未初始化则先初始化）
      if (!this.chartInstance3 && this.$refs.homeSec3_chart4) {
        this.chartInstance3 = this.$echarts.init(this.$refs.homeSec3_chart4);
      }

      const option = {
        color: ["#F0DE1F"], // 折线颜色
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            //  tooltip显示：时间 + 发电量
            const time = xLabels[params[0].dataIndex]; // 获取当前点的X轴标签（日期/月份）
            return `${time}<br/>光伏发电量：${params[0].value} kWh`;
          },
        },
        legend: {
          textStyle: { color: "#4c9bfd" },
          right: "10%",
          data: ["光伏发电量"], // 图例名称
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: false,
          borderColor: "#012f4a",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xLabels, // 动态X轴标签（日期/月份）
          axisTick: { show: false },
          axisLabel: {
            color: "#ffffff",
            interval: 0, // 强制显示所有标签
            rotate: this.active === 0 ? 45 : 0, // 每日模式标签旋转45度避免重叠
            fontSize: 12,
          },
          axisLine: { show: false },
        },
        yAxis: {
          type: "value",
          axisTick: { show: false },
          axisLabel: {
            color: "#ffffff",
            formatter: "{value} kWh", // Y轴单位：千瓦时
          },
          axisLine: { show: false },
          splitLine: { lineStyle: { color: "#012f4a" } },
        },
        series: [
          {
            name: "光伏发电量",
            type: "line",
            smooth: false,
            data: data, // 动态数据（发电量数组）
            areaStyle: {
              color: "rgba(240, 222, 31, 0.5)", // 填充区域颜色
            },
            symbol: "circle", // 显示数据点
            symbolSize: 6, // 数据点大小
            itemStyle: {
              color: "#F0DE1F", // 数据点颜色
            },
          },
        ],
      };

      // 设置图表配置项（更新图表）
      this.chartInstance3.setOption(option);
    },

    // 销毁图表实例
    destroyCharts() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }
      if (this.chartInstance2) {
        this.chartInstance2.dispose();
        this.chartInstance2 = null;
      }
      if (this.chartInstance3) {
        this.chartInstance3.dispose();
        this.chartInstance3 = null;
      }
    },
  },

  beforeDestroy() {
    // 清理所有定时器和事件监听
    this.clearData2Timer();
    this.clearDailyRefreshTimer(); // 清除每日自动刷新定时器
    this.destroyCharts();
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>
<style lang="less" scoped>
.warpper {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  /*  flex-direction: column; */
}

.bgImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.centerLine {
  position: absolute;
  top: 90px;
  left: 35%;
  width: 10%;

  .cenBox {
    width: 100%;

    .cen_line1 {
      width: 2px;
      height: 26px;
      background: #57c2d7;
    }
  }

  .cen_line2 {
    width: 100%;
    height: 2px;
    background: #57c2d7;
  }
}

.homeBox1_sec1 {
  width: 40%;
}

.chart {
  width: 100% !important;
  height: 100% !important;
  min-height: 120px; // 确保最小高度，防止被过度压缩
  // 若父容器没有明确尺寸，可直接指定像素值
  // width: 400px !important;
  // height: 300px !important;
}

.sec1_box1,
.sec1_box2 {
  display: flex;
  justify-content: center;
}

.sec1_box2 {
  align-items: center;
}

.sec1_box1 .voltage {
  font-weight: normal;
  font-size: 16px;
  color: #ffffff;
}

.sec1_box2 .transformer {
  font-weight: normal;
  font-size: 16px;
  color: #ffffff;
}

.homeBox1_sec1 .lineCulb {
  text-align: center;
  margin: 0 16px 0 8px;
}

.homeBox1_sec1 .lineCulb .line_y1 {
  width: 2px;
  height: 26px;
  background: #57c2d7;
  margin: 0 auto;
}

.homeBox1_sec1 .lineCulb .circle1,
.homeBox1_sec1 .lineCulb .circle2 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #57c2d7;
  margin: 0 auto;
}

.homeBox1_sec1 .lineCulb .circle2 {
  margin-top: -10px;
}

.redCulb {
  position: relative;

  .redLine {
    width: 90%;
    height: 6px;
    background: #ff1515;
    margin-left: 4%;
  }
}

.inverterArea {
  width: 40%;
  /* border: 1px solid red; */
}

.homeBox1_sec1 .inverter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.homeBox1_sec1 .inverter .txt_icon {
  position: relative;
  /* width: 100%; */
}

.homeBox1_sec1 .inverter .line_y2 {
  width: 2px;
  height: 60px;
  background: #57c2d7;
}

.homeBox1_sec1 .inverter .icon1_1 {
  width: 62px;
  height: 78px;
  vertical-align: middle;
}

.homeBox1_sec1 .inverter .icon1_2 {
  width: 92px;
  height: 92px;
  vertical-align: middle;
  margin-bottom: 10px;
}

.homeBox1_sec1 .inverter .inverterTxt {
  position: absolute;
  left: -60%;
  font-weight: normal;
  font-size: 16px;
  color: #ffffff;
  /* margin-right: 10px; */
}

.homeBox1_sec1 .inverter .inverterTxt2 {
  left: -150%;
}

.txtNum_left {
  /* width: 20%; */
  text-align: right;
}
.txtNum {
  font-weight: normal;
  font-size: 16px;
  color: #ffffff;
  line-height: 26px;
  z-index: -1;
}

.ac_pile {
  width: 60%;
}

.ac_pile .acArea {
}

.ac_pile .acArea .line_y3 {
  width: 2px;
  height: 160px;
  background: #57c2d7;
  margin: 0 auto;
}

.line_y4_club {
  width: 90%;
  margin: 0 auto;
}

.line_y4_club2 {
  width: 90%;
  margin: 0 auto;

  .leftBox {
    display: flex;
    // justify-content: space-between;
    width: 55%;
  }

  .rightBox {
    display: flex;
    justify-content: space-between;
    width: 45%;
  }
}

.line_y4_club .line_icon {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  align-items: center;
}

.ac_pile .acArea .line_y4 {
  width: 2px;
  height: 60px;
  background: #57c2d7;
  margin-bottom: 8px;
}

.line_x1 {
  width: calc(90% - 76px);
  height: 2px;
  background: #57c2d7;
  margin: 0 auto;
}

.line_x2 {
  position: relative;
  left: 38px;
  width: calc(90% - 152px);
  height: 2px;
  background: #57c2d7;
  margin: 0 auto;
}

.status_icon {
  position: relative;
  /* width: 22%; */
}
.indicate,
.indicate2 {
  position: absolute;
  left: -150%;
  font-weight: normal;
  font-size: 16px;
  color: #ffffff;
  /* margin-right: 10px; */
}

.pilot_lamp1,
.pilot_lamp2 {
  width: 10px;
  height: 10px;
  background: #8d8d8d;
  border-radius: 50%;
  margin-left: 4px;
}

.pilot_lamp2 {
  background: #0eff25;
}

.status_icon .ac_icon1 {
  width: 35px;
  height: 152px;
}

.pileNum {
  width: 78px;
  font-size: 14px;
  color: #ffffff;
  line-height: 32px;
  text-align: center;
}

.txtArea {
  position: relative;
  z-index: -1;
}

.txtNumClub {
  position: absolute;
  top: 0;
  left: -400%;
  width: 140px;
  text-align: right;
}

.homeBox1_sec2 {
  width: 60%;
  // height: 80vh;
  // border: 1px solid red;

  .redArea {
    position: relative;
    width: 90%;
    margin-left: 5%;

    .redTxt {
      position: absolute;
      top: -32px;
      right: 0;
      font-size: 16px;
      color: #ffffff;
      line-height: 32px;
    }

    .redLine2 {
      width: 100%;
      height: 6px;
      background: #ff1515;
    }
  }
  .line_y5 {
    width: 2px;
    height: 30px;
    background: #57c2d7;
    margin: 0 auto;
  }

  .line_y6,
  .line_y7 {
    width: 2px;
    height: 30px;
    background: #57c2d7;
    margin-bottom: 8px;
  }

  .line_y7 {
    height: 60px;
  }

  .indicate2 {
    left: -30%;
  }

  .energyBox {
    width: 230px;
    height: 80px;
  }

  .txtNumClub2 {
    left: -520%;
  }

  .ac_icon2 {
    width: 50px;
    height: 150px;
  }

  .pileNum2 {
    width: 132px;
  }

  .table_box {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    // border: 2px solid #26b9d5;
    margin-right: 40px;
  }
}

.table_box1 {
  width: 900px;
}

.table_box1,
.table_box3 {
  height: 136px;
  display: flex;
  flex-direction: column;
  padding: 5px; // 预留内边距
  box-sizing: border-box; // 确保padding不影响总高度

  .leftTitle {
    font-weight: 500;
    font-size: 18px;
    color: #26b9d5;
    line-height: 26px;
    z-index: 9999;
  }

  // .boxClub1 {
  //   width: 84px;
  //   height: 28px;
  //   border-radius: 4px;
  //   border: 1px solid rgba(255, 255, 255, 0.5);
  //   margin-right: 10px;
  // }

  .charge,
  .charge2 {
    width: 42px;
    font-size: 14px;
    color: #f0de1f;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    z-index: 9999;
  }

  .charge2 {
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    color: #25befd;
  }

  .boxClub2 {
    width: 80px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #ffffff;
  }

  .day,
  .mounth {
    width: 40px;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    z-index: 9999;
  }

  .active {
    color: #333;
    background: #ffffff;
  }
}

.table_box2 {
  margin-top: 30px;
}

.table_box3 {
  width: 850px;
  height: 136px;
  // border: 1px solid red;
  margin: 10px 0 0 5%;
}
</style>
